<script setup>

</script>

<template>
    <router-view/>
</template>

<style lang="scss">

.hideScrollBar::-webkit-scrollbar {
  width: 0
}

.hideScrollBar {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.el-popper.is-light {
  background: #0a1b50 !important;
  border: none !important;
}

.el-select-dropdown__item {
  font-size: 16px !important;
  font-family: PingFang;
  font-weight: bold;
  color: #FFFFFF !important;
  height: 50px !important;
  border: 2px solid rgba(#004583, 0);
}

.el-select-dropdown__item:hover {
  border: 2px solid #004583;
}

.el-select__popper.el-popper {
  border: 1px solid #053d79;
}

.el-popper__arrow {
  display: none;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: rgba(9, 27, 82, 0.6) !important;
}

.el-select-dropdown {
  background: rgba(9, 27, 82, 0.6);
  border: 1px solid #004583;
  border-radius: 2px;
  box-shadow: none;
  margin-top: -10px;

  .el-scrollbar {
    --el-scrollbar-opacity: 0.3;
    --el-scrollbar-bg-color: #0a1b50;
    --el-scrollbar-hover-opacity: 0.5;
    --el-scrollbar-hover-bg-color: #0a1b50;
  }
}

.el-scrollbar {
  .el-select-dropdown__list {
    margin: 0 !important;
  }
}

.ml30 {
  margin-left: 30px;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background: none !important;
}

//火狐浏览器
.scrollBar {
  scrollbar-width: 'auto'; //只有 auto、thin、none
  scrollbar-color: rgba(31, 160, 248, 1.00) #2652bd; /* 第一个颜色为滚动条的颜色， 第二个颜色为滚动条轨道的颜色 */
}

//火狐浏览器
//谷歌浏览器
.scrollBar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/*滚动条滑块*/
.scrollBar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #d8d8d8;
  background: rgba(31, 160, 248, 1.00);
}

/*滚动条轨道*/
.scrollBar::-webkit-scrollbar-track { /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(8, 20, 61, 0);
  border-radius: 10px;
  background: rgba(8, 20, 61, 0);
}
</style>


<style lang="scss">
.lil-gui.root > .title{
  display: none;
}
.top-label {
  background-color: rgba(255, 215, 0, 0);
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  transform: scale(1);
}

.top-label:hover {
  transform: scale(1.1); /* 鼠标悬停时轻微放大 */
  opacity: 0.9;
}

.home {
  width: 100%;
  height: 100%;
  background: rgba(255, 215, 0, 0);
  position: fixed;
}

.tags {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  margin-top: -50px;
}

.msg-div {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  border-radius: 5px;
  z-index: 9999999;
  pointer-events: auto;
  left: 10px !important;
  top: 10px !important;
  transform: translateY(-50%);
  max-width: 200px;
  text-align: center;
  user-select: none;
}

.parameter-div .name {
  font-size: 16px;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.planet-detail {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 50, 0.8));
  color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  z-index: 9999;
  font-family: 'Arial', sans-serif;
  backdrop-filter: blur(10px); /* 背景模糊效果 */
  transition: all 0.3s ease-in-out; /* 过渡效果 */
  transform: scale(0.9); /* 初始缩小 */
  opacity: 0;
  animation: fadeIn 0.5s forwards, popUp 0.5s forwards;
}

.planet-detail h2 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
  color: #ffd700; /* 金黄色 */
}

.planet-detail p {
  font-size: 18px;
  text-align: center;
  margin: 0;
  color: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popUp {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.score-label {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2s ease-in-out;
}

</style>
<style lang="scss">
.top{
 box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 222;
  height:80px;
  width:100%;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  background-image: url('/public/img/topNav.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  .span{
    overflow:hidden;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
 
}
.top3{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height:60px;
  width:100%;
  // background-image: url('/public/img/headerAnmate.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.top2{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height:240px;
  width:100%;
  background-image: url('/public/img/top7.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.left2{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 45;
  height: calc(100% );
  width:280px;
  background-image: url('/public/img/left4.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.left{
  box-sizing: border-box;
  position: absolute;
  top: 80px;
  left: 30px;
  z-index: 2345;
  height: calc(100% - 150px);
  width:200px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: rgb(135, 143, 255,0);
  overflow-y:scroll;
  .top1{
    height: 100%;
    .tit{
      height: 40px;
      background-image: url('/public/img/shangT.png');
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
      font-size: 22px;
      line-height: 40px;
      padding-left: 20px;

    }
  }
}
.wenzi{
  width: 50%;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;    /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.wenzi2{
  width: 50%;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;    /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.one,.two,.three,.other{
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 24px;

      }
      .icon1{
        width: 40px;
          height: 40px; background-image: url('/public/img/jin.png');
          background-position: bottom;
          background-size: contain;
          background-repeat: no-repeat;
   }
      .icon2{
        width: 40px;
          height: 40px; background-image: url('/public/img/yin.png');
          background-position: bottom;
          background-size: contain;
          background-repeat: no-repeat;
   }
      .icon3{
        width: 40px;
          height: 40px; background-image: url('/public/img/tong.png');
          background-position: bottom;
          background-size: contain;
          background-repeat: no-repeat;
   }
   .right5{
    position: absolute;
    top: 0px;
    right: 0px;
    // border: 1px solid red;
    z-index: 76;
    height: calc(100% );
    width:280px;
    background-image: url('/public/img/right5.png');
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
   }
.right{
  box-sizing: border-box;
  position: absolute;
  top: 80px;
  right: 30px;
  z-index: 776;
  height: calc(100% - 150px);
  width:220px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: rgb(135, 143, 255,0);
  overflow:hidden;
  .top1{
    height: 60%;
    overflow-y: scroll;
    .tit{
      height: 40px;
      background-image: url('/public/img/xiaT.png');
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
      font-size: 22px;
      line-height: 40px;
      padding-right: 20px;
    }
    .rightTOP{
      
    height: calc(100% - 40px);
    display: flex; /* 使用 Flexbox */
    flex-direction: column; /* 纵向排列 */
    padding-right: 10px;
    padding-top: 20px;
    div{
      flex: 1; /* 均分高度 */
      position: relative; /* 设置为相对定位 */
      border-right: 2px solid #373b44;
      box-sizing: border-box;
      padding-top: 0px;
      text-align: right;


      .time{
      font-size: 12px;
      color: #cecfd2;
      position: absolute; /* 设置为绝对定位 */
      top: -10px; /* 距离顶部的距离 */
      right: 20px; /* 右边框的中心 */
    }
    article{
    }
    .contant{
      margin-top: 25px;
      font-size: 17px;
      margin-right: 20px;
    }
    .contant2{
      font-size: 23px;
      margin-right: 20px;
    }
    }
   
    }
    .icon21 {
    position: absolute; /* 设置为绝对定位 */
    top: 0px; /* 距离顶部的距离 */
    right: 0px; /* 右边框的中心 */
    transform: translateX(50%); /* 水平居中 */
    width: 20px; /* 图标宽度，根据需要调整 */
    height: 20px; /* 图标高度，根据需要调整 */
}
  }
  .bot1{
    // border: 1px solid red;
    height: 60%;
    .tit{
      height: 40px;
      background-image: url('/public/img/xiaT.png');
      background-position: bottom;
      background-size: contain;
      background-repeat: no-repeat;
      font-size: 22px;
      line-height: 40px;
      // border: 1px solid red;
      padding-right: 20px;
    }
    .rightBot{
      height: 300px;
      display: flex; /* 使用 Flexbox */
      flex-direction: column; /* 纵向排列 */
      padding-right: 10px;
      padding-top: 20px;
      overflow-y: scroll;

      div{
       
        flex: 1; /* 均分高度 */
        position: relative; /* 设置为相对定位 */
        border-right: 2px solid #373b44;
        box-sizing: border-box;
        text-align: right;
  
  
        .time{
        font-size: 12px;
        color: #cecfd2;
        position: absolute; /* 设置为绝对定位 */
        top: -10px; /* 距离顶部的距离 */
        right: 20px; /* 右边框的中心 */
      }
   
      .contant{
        margin-top: 25px;
        font-size: 17px;
        margin-right: 20px;
      }
  
      }
     
      }
      .icon21 {
      position: absolute; /* 设置为绝对定位 */
      top: 0px; /* 距离顶部的距离 */
      right: 0px; /* 右边框的中心 */
      transform: translateX(50%); /* 水平居中 */
      width: 20px; /* 图标宽度，根据需要调整 */
      height: 20px; /* 图标高度，根据需要调整 */
  }
  }
}

.bot{
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 221;
  height: 60px;
  width:100%;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background-image: url('/public/img/botNav.png');
  background-position: bottom;
  background-repeat: no-repeat;

  background-size: contain;
  overflow:hidden;
}
.bot2{
  height: 200px;
  width:100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-image: url('/public/img/bot12.png');
  background-position: bottom;
  background-repeat: no-repeat;

  background-size: cover;
}
.center{
  display: flex;
  justify-content: flex-start;
  position: absolute;
  top: 100px;
  right: 43%;
  transform: translate(50%,0);
  z-index: 3;
  div{
    width:60px;
    height: 80px;
    font-size: 30px;
    background-image: url('/public/img/time.png');
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 90px;
    scale: 0.8;
  }
  span{
    display: flex;
    align-items: flex-end;
    margin-left: 5px;
    color: #97999e;
  }
}
.animate__animated.animate__backInLeft {
  --animate-duration: 5s;
}

.animate__animated.animate__backInDown {
  --animate-duration: 5s;
}

.animate__animated.animate__backInRight {
  --animate-duration: 5s;
}

.animate__animated.animate__backInUp {
  --animate-duration: 5s;
}
.home{
  overflow:hidden;
}

</style>